<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>data与el的两种写法</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
			data与el的2种写法：
					1.el有2种写法：
							(1).new Vue时候直接传递el属性。
							(2).先new Vue 再通过vm.$mount('#root')指定el属性。
					2.data有2种写法：
							(1).对象式: 非组件化编码时:可以写对象，也可以写函数。
							(2).函数式：组件化编码时：必须使用函数式的data。
			Vue中的一个最最重要的原则：
					由Vue所管理的函数，一定不要写成箭头函数，一旦写了箭头函数，this就不是vm了。
		-->

		<!-- 准备好一个容器-->
		<div id="root">
			<h2>你好，{{school}}</h2>
			<h2>地址：{{address}}</h2>
		</div>

		<script type="text/javascript" >
			//el的第一种写法：new Vue时传递el属性
			/*new Vue({
				el:'#root',
				data:{
					school:'尚硅谷',
					address:'宏福科技园'
				}
			}) */
		
			//el的第二种写法：new Vue时不传递el属性
			/* const vm = new Vue({
				data:{
					school:'尚硅谷',
					address:'宏福科技园'
				}
			})
			vm.$mount('#root') */

			//data的第一种写法——对象式
			/* new Vue({
				el:'#root',
				data:{
					school:'尚硅谷',
					address:'宏福科技园'
				}
			}) */

			//data的第二种写法——函数式（后期学习组件编码时，data必须写成函数！！）
			const vm = new Vue({
				el:'#root',
				/* 
					1.此处的data函数是Vue帮我们调用的，this是vm。
					2.一定不要写箭头函数，若写了箭头函数，this指向就不是vm了，后续会引发问题
				*/
				data(){ 
					console.log('@@',this)
					return {
						school:'尚硅谷',
						address:'宏福科技园'
					}
				}
			})
			console.log(vm)

			
		</script>
	</body>
</html>